<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <#--<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>-->
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">



    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/ftl/js/jquery.validation/1.14.0/messages_zh.min.js"></script>


    <style>
        input.error{
            border: 1px solid crimson;
        }
    </style>
</head>

<body>

<div class="container">
    <form id="regForm">

        <label for="username">用户名:</label>
        <input type="text"  name="username" id="username" placeholder="请输入用户名"/><br>
        <label for="password"> 密码:</label>
        <input type="password" name="password" id="password"  placeholder="请输入密码" /><br>
        <label for="password">  手机号:</label>
        <input type="text" name="telPhone" id="telPhone" placeholder="请输入手机号"/>
        <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /> <p id="vcodemsg" style="color: #ac2925"></p>
        <label for="vcode">  验证码:</label>
        <input type="text" name="vcode" id="vcode" placeholder="请输入6位验证码"  /><br><br>
        <input type="button" id="refistSave" value="注册">
    </form>

</div>


<script type="text/javascript">
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var verificationCode; //验证码变量

    function sendMessage() {
        if(!checkPhone().form()){
            return;
        }
        curCount = count;
        //设置button效果，开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: 'reguser.do', //目标地址
            data: {
                telPhone:$("#telPhone").val(),
            },
            success: function (msg){
                console.log(msg)
                var jsonObj = JSON.parse(msg.rigresult);
                verificationCode = jsonObj.obj;
                console.log(jsonObj);
                console.log(jsonObj.obj )
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) { },
        });
    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        }
    }


    $("#refistSave").click(function () {
        if(!check().form()){
            return;
        }
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: 'reguser.do', //目标地址
            data: {
                username:$("#username").val(),
                password:$("#password").val,
                telPhone:$("#telPhone").val(),
            },
            success: function (msg){}
        })
    })



  function check() {
        return $("#regForm").validate({
            rules:{
                username:{
                    required:true,
                    minlength: 2,
                },
                password:{
                    required:true,
                    minlength: 6,
                },
                telPhone:{
                    required: true,
                    minlength: 11,
                    maxlength:11,
                    digits:true,
                    number:true,
                },
                vcode:{
                    required:true
                }
            },
            messages:{
                username:{
                    required: "不能为空",
                    minlength: "不能少于2个字符"
                },
                password:{
                    required: "不能为空",
                    minlength: "不能少于6个字符"
                },
                telPhone:{
                    required: "不能为空",
                    minlength: "必须11位数字",
                    maxlength:"必须11位数字",
                    digits:"必须是数字"    ,
                    number:"请输入有效数字",

                },
                vcode:{
                    required:"",
                }
            }
        })
    }



    function checkPhone() {
       return  $("#regForm").validate({
            rules:{
                telPhone:{
                    required: true,
                    minlength: 11,
                    maxlength:11,
                    digits:true,
                    number:true,
                }
            },
            messages:{
                telPhone:{
                    required: "不能为空",
                    minlength: "必须11位数字",
                    maxlength:"必须11位数字",
                    digits:"必须是数字"    ,
                    number:"请输入有效数字",
                }
            }
        })
    }

    $("#vcode").on('blur',function () {
        if( $("#vcode").val() != verificationCode){
            $("#refistSave").attr("disabled", "true");
            $("#vcodemsg").html("请输入正确的六位验证码");
        }else {
            $("#refistSave").removeAttr("disabled");//启用注册
            $("#vcodemsg").html("");
        }
    })
</script>
</body>
</html>
